---
id: rows
title: Rows & Row
---

import { Props, BoxProps } from '../../core/components';

`Rows` renders children vertically in equal-height rows by default, with consistent spacing between them.

### Space

```jsx live
const styles = StyleSheet.create({
  fluidPlaceholder: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
  },
})

const FluidPlaceholder = () => {
  return (
    <Box flex="fluid" style={styles.fluidPlaceholder} />
  )
}

const App = () => {
  return (
    <Container height={440}>
      <Rows space={4}>
        <FluidPlaceholder />
        <FluidPlaceholder />
        <FluidPlaceholder />
      </Rows>
    </Container>
  )
}

render(<App />)
```

### Nested

```jsx live
const styles = StyleSheet.create({
  fluidPlaceholder: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
  },
})

const FluidPlaceholder = () => {
  return (
    <Box flex="fluid" style={styles.fluidPlaceholder} />
  )
}

const App = () => {
  return (
    <Container height={440}>
      <Rows space={12}>
        <Row height="content">
          <Rows space={4}>
            <Placeholder />
            <Placeholder />
            <Placeholder />
          </Rows>
        </Row>
        <Row>
          <FluidPlaceholder />
        </Row>
      </Rows>
    </Container>
  )
}

render(<App />)
```

### Default Height

```jsx live
const styles = StyleSheet.create({
  fluidPlaceholder: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
  },
})

const FluidPlaceholder = () => {
  return (
    <Box flex="fluid" style={styles.fluidPlaceholder} />
  )
}

const App = () => {
  return (
    <Container height={440}>
      <Rows defaultHeight="1/4" space={4}>
        <FluidPlaceholder />
        <FluidPlaceholder />
        <Row height="1/2">
          <FluidPlaceholder />
        </Row>
      </Rows>
    </Container>
  )
}

render(<App />)
```

### AlignX

```jsx live
const styles = StyleSheet.create({
  fluidPlaceholder: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
  },
})

const FluidPlaceholder = props => {
  const { style, width } = props

  return (
    <Box flex="fluid" style={[styles.fluidPlaceholder, { width }, style]} />
  )
}

const App = () => {
  return (
    <Container height={240}>
      <Columns alignX="between" space={4} height="fluid">
        <Rows space={4} alignX="left">
          <Row width="content">
            <FluidPlaceholder width={120} />
          </Row>
          <Row width="content">
            <FluidPlaceholder width={140} />
          </Row>
          <Row width="content">
            <FluidPlaceholder width={100} />
          </Row>
        </Rows>

        <Rows space={4} alignX="center">
          <Row width="content">
            <FluidPlaceholder width={100} />
          </Row>
          <Row width="content">
            <FluidPlaceholder width={140} />
          </Row>
          <Row width="content">
            <FluidPlaceholder width={120} />
          </Row>
        </Rows>

        <Rows space={4} alignX="right">
          <Row width="content">
            <FluidPlaceholder width={100} />
          </Row>
          <Row width="content">
            <FluidPlaceholder width={140} />
          </Row>
          <Row width="content">
            <FluidPlaceholder width={120} />
          </Row>
        </Rows>
      </Columns>
    </Container>
  )
}

render(<App />)
```

### AlignY

```jsx live
const App = () => {
  return (
    <Container height={440}>
      <Columns alignX="between" space={4} height="fluid">
        <Rows space={4} alignY="top">
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
        </Rows>

        <Rows space={4} alignY="center">
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
        </Rows>

        <Rows space={4} alignY="bottom">
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
        </Rows>

        <Rows space={4} alignY="between">
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
        </Rows>

        <Rows space={4} alignY="around">
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
        </Rows>

        <Rows space={4} alignY="evenly">
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
          <Row height="content">
            <Placeholder />
          </Row>
        </Rows>
      </Columns>
    </Container>
  )
}

render(<App />)
```

### Width

```jsx live
const App = () => {
  return (
    <Rows space={4}>
      <Row width="fluid">
        <Placeholder />
      </Row>
      <Row width="4/5">
        <Placeholder />
      </Row>
      <Row width="3/4">
        <Placeholder />
      </Row>
      <Row width="2/3">
        <Placeholder />
      </Row>
      <Row width="3/5">
        <Placeholder />
      </Row>
      <Row width="1/2">
        <Placeholder />
      </Row>
      <Row width="1/3">
        <Placeholder />
      </Row>
      <Row width="1/4">
        <Placeholder />
      </Row>
      <Row width="1/5">
        <Placeholder />
      </Row>
      <Row width="content">
        <Placeholder width={320} />
      </Row>
    </Rows>
  )
}

render(<App />)
```

### Height

```jsx live
const styles = StyleSheet.create({
  fluidPlaceholder: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
  },
})

const FluidPlaceholder = () => {
  return (
    <Box flex="fluid" style={styles.fluidPlaceholder} />
  )
}

const App = () => {
  return (
    <Container height={440}>
      <Columns space={4} alignX="between" height="fluid">
        <Rows space={4}>
          <Row height="1/2">
            <FluidPlaceholder />
          </Row>
          <Row height="1/2">
            <FluidPlaceholder />
          </Row>
        </Rows>

        <Rows space={4}>
          <Row height="1/3">
            <FluidPlaceholder />
          </Row>
          <Row height="1/3">
            <FluidPlaceholder />
          </Row>
          <Row height="1/3">
            <FluidPlaceholder />
          </Row>
        </Rows>

        <Rows space={4}>
          <Row height="2/3">
            <FluidPlaceholder />
          </Row>
          <Row height="1/3">
            <FluidPlaceholder />
          </Row>
        </Rows>

        <Rows space={4}>
          <Row height="1/4">
            <FluidPlaceholder />
          </Row>
          <Row height="1/4">
            <FluidPlaceholder />
          </Row>
          <Row height="1/4">
            <FluidPlaceholder />
          </Row>
          <Row height="1/4">
            <FluidPlaceholder />
          </Row>
        </Rows>

        <Rows space={4}>
          <Row height="1/4">
            <FluidPlaceholder />
          </Row>
          <Row height="1/2">
            <FluidPlaceholder />
          </Row>
          <Row height="1/4">
            <FluidPlaceholder />
          </Row>
        </Rows>

        <Rows space={4}>
          <Row height="1/4">
            <FluidPlaceholder />
          </Row>
          <Row height="3/4">
            <FluidPlaceholder />
          </Row>
        </Rows>

        <Rows space={4}>
          <Row height="1/5">
            <FluidPlaceholder />
          </Row>
          <Row height="2/5">
            <FluidPlaceholder />
          </Row>
          <Row height="2/5">
            <FluidPlaceholder />
          </Row>
        </Rows>

        <Rows space={4}>
          <Row height="1/5">
            <FluidPlaceholder />
          </Row>
          <Row height="3/5">
            <FluidPlaceholder />
          </Row>
          <Row height="1/5">
            <FluidPlaceholder />
          </Row>
        </Rows>

        <Rows space={4}>
          <Row height="1/5">
            <FluidPlaceholder />
          </Row>
          <Row height="4/5">
            <FluidPlaceholder />
          </Row>
        </Rows>
      </Columns>
    </Container>
  )
}

render(<App />)
```

### markAsRow

Use this function to mark your custom component as `Row` (required due to an internal implementation of `Stacks`).

```jsx
import { markAsRow } from '@mobily/stacks'
```

```jsx live
const styles = StyleSheet.create({
  fluidPlaceholder: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
  },
})

const FluidPlaceholder = () => {
  return (
    <Box flex="fluid" style={styles.fluidPlaceholder} />
  )
}

const CustomRow = props => {
  const { children } = props
  return (
    <Row>
      {children}
    </Row>
  )
}

markAsRow(CustomRow)

const App = () => {
  return (
    <Container height={440}>
      <Rows space={4}>
        <CustomRow>
          <FluidPlaceholder />
        </CustomRow>
        <CustomRow>
          <FluidPlaceholder />
        </CustomRow>
        <CustomRow>
          <FluidPlaceholder />
        </CustomRow>
      </Rows>
    </Container>
  )
}

render(<App />)
```

### Rows Props

:::info

`Rows` and `Row` components accept all [`View`](https://reactnative.dev/docs/view) props.

:::

<Props
  data={[
    {
      name: 'space',
      type: 'responsiveProp<float>',
      required: false,
    },
    {
      name: 'alignY',
      type: 'responsiveProp<[#top | #center | #bottom | #stretch  | #between | #around | #evenly]>',
      required: false,
    },
    {
      name: 'alignX',
      type: 'responsiveProp<[#left | #center | #right]>',
      required: false,
    },
    {
      name: 'reverse',
      type: 'bool',
      required: false,
    },
  ]}
/>

<BoxProps />

### Row Props

<Props
  data={[
    {
      name: 'width',
      type: 'responsiveProp<[#content | #fluid | #f12 | #f13 | #f23 | #f14 | #f34 | #f15 | #f25 | #f35 | #f45]>',
      required: false,
      defaultValue: 'fluid'
    },
    {
      name: 'height',
      type: 'responsiveProp<[#content | #fluid | #f12 | #f13 | #f23 | #f14 | #f34 | #f15 | #f25 | #f35 | #f45]>',
      required: false,
      defaultValue: 'fluid'
    },
  ]}
/>

<BoxProps omit={[
  'margin',
  'marginX',
  'marginY',
  'marginTop',
  'marginBottom',
  'marginLeft',
  'marginRight',
  'marginStart',
  'marginEnd',
]} />
